<template>
	<div>
		<el-container>
			<el-container>
				<el-aside>
					<asidMenu :menu="menu" :homeMenu="homeMenu"></asidMenu>
				</el-aside>
				<el-container>
					<el-header class="header">
						<header-component></header-component>
					</el-header>
					<el-main class="main">
						<tab-component>
						</tab-component>
					</el-main>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import{getUserId,getRoleIdByUserId,getResourceList,getMenu} from "../../plugins/server.js"
	import asidMenu from "../../components/asidMenu.vue"
	import headerComponent from "../../components/headerComponent.vue"
	import tabComponent from "../../components/tabComponent.vue"
	export default {
		data() {
			return {
				homeMenu:{
					  routerName:"Home",
					  name:"首页"
					},
				menu:[]
			}
		},
		
		created() {
			this.$store.dispatch('editableTabs',this.homeMenu)
			getUserId().then(res=>{
				let userId={
					"userId":res.data.data
				}
				getRoleIdByUserId(userId).then(res=>{
					let roleId={
						"roleId":res.data.data
					}
					getResourceList(roleId).then(res=>{
						let resourceIdList=res.data.data.map(item => item.toString())
						getMenu(resourceIdList).then(res=>{
							this.menu=this.findMenu(res.data.data)
						})
					})				
				})
			});
		},
		components: {
			asidMenu,
			headerComponent,
			tabComponent
		},
		methods:{
			findMenu(resourceList){
				let menu=[];
				for (let s of resourceList) {
						let item={
							name:"",
							icon:"",
							routerName:"",
							menuItem:""
						};
						item.name=s.resourceName;
						item.icon=s.icon;
						item.routerName=s.routerName;
						item.menuItem=this.findMenu(s.childMenu);
						menu.push(item);
				}
				return menu
			}
		}

	}
</script>

<style>

</style>